<script setup>
import CacheClear from '~/contentScripts/views/tao/detail/components/tool/cacheClear.vue'
import MobileDetail from '~/contentScripts/views/tao/detail/components/tool/mobileDetail.vue'
import TbHotModal from "~/contentScripts/views/tao/list/components/TbHotModal.vue";
import TmHotModal from "~/contentScripts/views/tao/list/components/TmHotModal.vue";
import {isLogin} from "~/logic";
import {jumpTaoCenter, jumpUcenter} from "~/utils/util";

const loginVisible = ref(false)
/**
 * @type ItemInterface
 */
const item = getCurrentInstance().proxy.$item
const handle = () => {
  window.open('https://files.alicdn.com/tpsservice/1567444f68c85582535edb2225a43107.xlsx');
}
</script>

<template>
  <a-row :gutter="5">

    <a-col flex="1">
      <a-row type="flex" :gutter="5">
        <a-col>
          <div class="bold inner-box" style="background: #1890ff;color: #fff;font-size: 12px;">
            竞品监控 <img src="../../../../../assets/hot.png" height="15" width="12"
                          style="position: absolute;right: -6px;top: -6px;"
          />
          </div>
        </a-col>
        <a-col flex="1">
          <a-row :gutter="5">
            <a-col flex="1">
              <div class="inner-box btn bold" @click="jumpTaoCenter('item/list?id='+item.itemId())">
                商品/SKU实时监控
              </div>
            </a-col>
            <a-col>
              <div class="inner-box btn bold" @click="jumpTaoCenter('item/list?id='+item.itemId())">
                动态监控
              </div>
            </a-col>
            <a-col>
              <div class="inner-box btn bold" @click="jumpTaoCenter('shop/list?id='+item.itemId())">
                店铺销量监控
              </div>
            </a-col>
            <a-col>
              <div class="inner-box btn bold" @click="jumpTaoCenter('shop/list?id='+item.itemId())">
                店铺上新监控
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-col>
    <a-col>
      <div class="bold inner-box" style="background: #1890ff;color: #fff;font-size: 12px;">
        其他工具
      </div>
    </a-col>
    <a-col flex="1">
      <a-row type="flex" :gutter="5">
        <a-col>
          <div class="inner-box btn bold" @click="jumpUcenter('userCenter/queryRanking')">
            实时查排名
          </div>
        </a-col>
        <a-col>
          <div class="inner-box btn bold" @click="jumpUcenter('userCenter/searchWord')">
            全网淘词
          </div>
        </a-col>
        <a-col>
          <MobileDetail/>
        </a-col>
        <a-col flex="1">
          <a-popover placement="bottom">
            <template #content>
              <a-row type="flex" :gutter="5">
                <a-col>
                  <TbHotModal>
                    <div class="inner-box btn"
                         style="background: #f0f3fa;padding: 3px 8px;border-radius: 3px;cursor: pointer;"
                    >手淘热榜
                    </div>
                  </TbHotModal>
                </a-col>
                <a-col>
                  <TmHotModal>
                    <div class="inner-box btn"
                         style="background: #f0f3fa;padding: 3px 8px;border-radius: 3px;cursor: pointer;"
                    >天猫榜单
                    </div>
                  </TmHotModal>
                </a-col>
              </a-row>
            </template>
            <div class="inner-box btn bold" style="background: #1890ff;color: #fff;font-size: 12px;">
              榜单分析
            </div>
          </a-popover>
        </a-col>
        <a-col>
          <div class="inner-box btn bold" @click="handle">
            20万关键字
          </div>
        </a-col>
        <a-col>
          <CacheClear/>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
  <user-login-modal :login-visible="loginVisible" @close="loginVisible = false"/>
</template>

<style scoped>

</style>
